
import React from 'react';
import {toJS} from "mobx";
import { inject, observer } from 'mobx-react';
import {weaTab,WeaEchart} from "ecCom";
import { WeaTableNew } from "comsMobx";
const WeaTable = WeaTableNew.WeaTable;

@inject('riskStore')
@observer
export default class Risk extends React.Component {

	componentDidMount(){
		const {getRiskList} = this.props.riskStore;
		getRiskList({contractId:this.props.refId});
	}

	componentWillUnmount(){
		const {componentWillUnmount} = this.props.riskStore;
		componentWillUnmount();
	}

	render() {
		const {tableStore,chartDatas} = this.props.riskStore;
		const chartDatas1 = toJS(chartDatas);
		const option = {
			title : {
				text : '风险情况',
				subtext : '风险等级/可能发生概率/可能发生时间'
			},
			tooltip : {
				trigger: 'axis',
				axisPointer:{
					show: true,
					type : 'cross',
					lineStyle: {
						type : 'dashed',
						width : 1
					}
				},
				formatter : function (params) {
					var seriesName = params[0].seriesName;
					var date = new Date(params[0].value[0]);
					var marker = params[0].marker;
                    return marker + '可能发生时间：'
                           + date.getFullYear() + '-'
                           + (date.getMonth() + 1) + '-'
                           + date.getDate()
						   + '<br/>'
						   +marker+ '可能发生概率：'
						   + params[0].value[1] 
						   + '<br/> ' 
						   + marker+ '风险等级：'
                           + params[0].value[2];
                
				}
			},
			toolbox: {
				show : false,
				feature : {
					mark : {show: true},
					dataView : {show: true, readOnly: false},
					restore : {show: true},
					saveAsImage : {show: true}
				}
			},
			dataZoom: {
				show: false,
				start : 0,
				end : 100
			},
			legend : {
				data : ['风险等级']
			},
			dataRange: {
				min: 0,
				max: 100,
				orient: 'horizontal',
				y: 30,
				x: 'center',
				text:['高','低'],           // 文本，默认为数值文本
				color:['red','orange','yellow','lightgreen'],
				splitNumber: 4
			},
			grid: {
				y2: 100
			},
			xAxis : [
				{
					type : 'time',
					splitNumber:10
				}
			],
			yAxis : [
				{
					type : 'value'
				}
			],
			animation: false,
			series : [
				{
					// name:'风险等级',
					type:'scatter',
					
					symbolSize: function (value){//散点大小
						return Math.round(value[2]);
					},
					data: chartDatas1
					//(function () {
						//var d = [['2014-02-12',32.21,25.1],['2015-02-12',11.2,51.2],['2016-02-12',52.4,93.4],['2017-09-12',89.4,13.4]];
						// var d = toJS(chartDatas);
						// d.push(['2014-02-12',32.21,25.1]);
						// d.push(['2015-02-12',11.2,51.2]);
						// d.push(['2016-02-12',52.4,93.4]);
						// d.push(['2017-09-12',89.4,13.4]);
						//console.log(d);
						//return d;
					//})()
				}
			]
		};
		
		let weaTableProps = {};//WeaTable中的属性集
		weaTableProps.comsWeaTableStore = tableStore;
		weaTableProps.hasOrder = true;
		weaTableProps.needScroll = true;
		let tableCom = <WeaTable  {...weaTableProps} />; 
		return (
			<div style={{paddingTop:"15px",paddingLeft:"20px",paddingRight:"20px"}}>
				{chartDatas1.length>0&&<div style={{ height: '350px' }} >
					<WeaEchart ref="chart" option={option} />
				</div>}
				<div style={{paddingTop:'5px'}}>
				{tableCom}
				</div>
			</div>
		)

	}

}